Vue 會自行觀察物件內變化,在第一時間產生 HTML 與更新 DOM。比起 jQuery 的命令式渲染,開發者只需要專注在視圖層的表現,而不需一步一步地告訴瀏覽器說「你要先做什麼,設定好,如果怎麼樣,再搬去哪裡。」聲明式渲染在 Vue 的功能下已經負責了許多背後需要處理的程序,物件變動時 data
物件中的每個屬性會自動被 getter 與 setter 代替。
【可以先知道,以後再回頭看的注意事項】
但是 Vue 實體初始化之後,只有現存屬性才有響應性。後續的程式如果直接加入新的屬性,不會具有響應性。所以至少要事先定義該你希望新增的屬性並設值為空或undefined
。
再舉個更生活化一點的例子
「一顆抓不到?那就買十顆!」
讓我們先看第一個 Vue 實體範例,結構部分於後續詳解。
<div id="app">
<p>歡迎來到{{ shopName }}!</p>
<p>現在買 {{ onSaleAmount }} 顆{{ ball[0] }}
<span style="color:red">送 1 顆{{ ball[3] }}!</span>
</p>
</div>
var vm = new Vue({
el:'#app',
data:{
shopName: '友好商店',
onSaleAmount: 10,
ball: ['精靈球','超級球','高級球','紀念球']
}
})
瀏覽器上的呈現效果如圖。第一個引起人注意的應該是, HTML 並不會寫出「歡迎來到{{ shopName }}」,而是依據 Vue 實體中的資料,透過插值的方式,成為對應的字串「友好商店」。
Vue 會將實體內的資料呈現在網頁上。這需要透過必要的結構一起合作。
第一個必要的結構是 HTML 的樣板。
<div id="app"> <!-- 樣板(templates) -->
...
</div>
HTML 依然提供鷹架的工作,而要讓 Vue 來操作這鷹架上的內容時,應給予 id 的識別與綁定。
var vm = new Vue({ // 宣告一個 vue 實體。
el:'#app',
data:{
...
}
})
vm
或 app
宣告, vm 代表 viewmodelid
為 app
的 div
由我來操控」;反過來說,id
不是 app
的 div
都不歸我這個 Vue 實體操作。data
中的同名對應屬性單向綁定。屬性可以賦予各種型別的值:數值(10)、字串(友好商店)、布林值、陣列(各種精靈球)、物件都是可行的。這是 Vue 實體最低限度、必要的結構,但精華在於透過指令操作實體中的資料,讓網頁依據條件判斷與呈現不同的內容。往後篇章會詳述指令的部分。
回到友好商店的 app
示例。如果今天中秋節,友好商店決定推出促銷活動:「中秋快閃活動購物送好禮急速手刀搶購優惠中,買 8 顆精靈球改送 1 顆超級球。」我必須做在文件中達成以下效果。
<div id="app">
<p>歡迎來到{{ shopName }}!</p>
<p>現在買 {{ onSaleAmount }} 顆{{ ball[0] }}
<span style="color:red">送 1 顆{{ ball[1] }}!</span>
<!-- 從 ball 陣列的值中的第 4 個元素改成第 2 個元素(ball[3] 改成 ball[1])-->
</p>
</div>
var vm = new Vue({
el:'#app',
data:{
shopName: '友好商店',
onSaleAmount: 8, /* 從 10 改成 8 */
ball: ['精靈球','超級球','高級球','紀念球']
}
})
{{ onSaleAmount }}
與 data
中 onSaleAmount
單向綁定{{ ball[1] }}
指向 data
中 ball
陣列的第 2 個元素有了結構上的認識之後,往後就可以透過指令、methods
與計算屬性,做更多資料的操控。
今天的程式碼在這個 codepen 裡,此文諸多不周到的地方還請各方大大多多包涵指教。
「祝大家中秋節快樂~」
寫得很清楚,淺顯易動~
謝謝,但真的很多不周到的地方,這也只算是個自我挑戰的筆記
還請參考這裡之餘,也一定要看看各方大大怎麼講解的,以免被我的錯誤觀念(儘管我很努力精進與釐清了)誤導
一起加油吧!